<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/fonts/iconfont.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/css/bathseat.css" rel="stylesheet" />
</head>
<body>
    <div class="bathseattitle"><h2>澡堂</h2></div><br>
    <div style="margin-left:30px;">
    <c:forEach items="${seatlist }" var="sl">
      <c:if test="${sl.seatflag==1}">
       <div class="seatone" style="color:red;"><span class="iconfont icon-zuowei"></span><p>${sl.seatnum}</p></div>
      </c:if>
       <c:if test="${sl.seatflag==0}">
       <div class="seatone" onclick="addappoint(${sl.seatnum},${sl.seatprice})"><span class="iconfont icon-zuowei"></span><p>${sl.seatnum}</p></div>
       </c:if>
    </c:forEach>
   </div>
   价格：<h2 id="price"></h2>
   <form action="${pageContext.request.contextPath}/appointment.action">
   <input type="text" name="bathid" value="${seatlist[0].bathid}" style="display:none;">
   <input type="text" name="merid" value="${seatlist[0].merid}" style="display:none;">
   <input type="text" name="userid" value="${USER_SESSION_USER.userid}" style="display:none;">
   <input type="text" id="allprice" name="usercost" style="display:none;">
   <input type="text" id="arr" name="seatnumarr" style="display:none;">
   <input type="submit" value="预约">
   </form>
   <!-- <button onclick="goappoint(,,)">预约</button> -->
    <script type="text/javascript">
    var num=0;
    var arr = new Array()
    function addappoint(seatnum,seatprice) {
    	if(document.getElementsByClassName('seatone')[seatnum-1].style.color=="red"){
    		document.getElementsByClassName('seatone')[seatnum-1].style.color="black";
    		this.num-=seatprice;
    		for(let i=0;i<arr.length;i++){
    			if(arr[i]==seatnum){
    				arr.splice(i,1);
    			}
    		}
    	}else{
    	document.getElementsByClassName('seatone')[seatnum-1].style.color="red";
    	this.num+=seatprice;
    	arr.push(seatnum);
    	}
    	document.getElementById("price").innerHTML=this.num;
    	document.getElementById("arr").innerHTML=this.arr;
    	document.getElementById("allprice").value=this.num;
    	document.getElementById("arr").value=this.arr;
    	//$.post("${pageContext.request.contextPath}/appointment.action",{"userid":userid});
    }
    </script>
</body>
</html>